
<template>
	<view>
		
		<cu-custom :bgColor="theme" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">我的课程</block>
		</cu-custom>
		
		<view style="background-color:#FFFFFF;padding-bottom: 50rpx;padding-top: 10rpx;">
			<view class="course-wrap" v-if="baobanKechengList.length > 0">
				<!-- 直播课列表 -->
				<view class="live-list" 
						v-for="(item, index) in baobanKechengList"  
						:key="index" 
						@click="viewContentInfo(item.kechengId)"
						style="height: 300rpx;"
						>
					<view class="live-list-img-wrap" style="margin-top: 50rpx;">
						<image class="live-list-img" :src="item.kechengImg" mode="aspectFill"></image>
						<!-- <text class="course-title-icon">系列课</text> -->
					</view>
					
					<view class="live-list-info">
						<view class="live-c-title">{{item.kechengName}}</view>
				<!-- 	<view class="live-status-tuwen">
							{{item.lesson}}
						</view> -->
						<view class="live-teacher-price">
							<image class="live-teacher-avatar" :src="item.teacherImg" mode="aspectFill"></image>
							<text class="teacher-name">{{item.kechengTeacher}}</text>
							<view class="price-wrap">
								<text class="free">免费</text>
							</view>
						</view>
						<view class="" style="color: #64D3AD;">{{item.className}}</view>
						<view class="" style="">{{item.showDetp}}</view>
						<view class="uni-padding-wrap uni-common-mt">
							<view class="progress-box">
								<progress :percent="item.kankelv" show-info="true" active stroke-width="4" backgroundColor="#666666">已学</progress>
							</view>
						</view>
							
					</view>
				</view>
			</view>
			<template v-else>
				<view class="xiangziwrap">
					<image class="xiangzi" src="../../static/images/xiangzi.png" mode="aspectFill"></image>
					<text class="xiangzi_txt">暂无报名课程</text>
				</view>
			</template>
			
		</view>	
	</view>
</template>

<script>
	const app = getApp();

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
				
				baobanKechengList:[],  // 报班课程
			}
		},
		// 加载页面数据
		onLoad(option) {
			this.getData();
		},
		methods: {
			//获取数据
			getData() {
				
				if(app.globalData.userinfo.studentId == null || app.globalData.userinfo.studentId == "" || app.globalData.userinfo.studentId == undefined){
					
					if(app.globalData.userinfo.userId != null && app.globalData.userinfo.userId != "" || app.globalData.userinfo.userId != undefined){
						uni.showModal({
										title: "用户提示",
										content: "游客不能操作此模块",
										showCancel:false,
										success: function (res) {
											if (res.confirm) {					
											} else if (res.cancel) {
											}
										}
									});
					}else{
						uni.showModal({
										title: "登录提示",
										content: "请登录后，继续观看课程",
										showCancel:false,
										success: function (res) {
											if (res.confirm) {								
												uni.navigateTo({
													url: '../login/login'
												});										
											} else if (res.cancel) {
											}
										}
									});
					}
					
				}else{
					uni.request({
						url: app.globalData.serve_study_url + 'getBaobanKechengList/'+ app.globalData.userinfo.user_phoneNum,
						success: res => {
							this.baobanKechengList = res.data.data;	
						}
					});
				}

			},
			
			viewContentInfo(kechengId) {
				uni.navigateTo({
					url: '../../packageB/pages/content-info/content-info?kechengId=' + kechengId,
				});
			},
		}
	}
</script>

<style>
	/* 大班课/内容列表公共样式 */
	@import url("/static/css/course_list.css");
	
	.uni-common-mt {
		margin-top: 10rpx;
	}
		
	.uni-padding-wrap {
		width: 94%;
		padding: 0rpx;
	}
	
	.live-list {
		width: 95%;
		height: 190rpx;
		margin: 30rpx auto;
		padding-top: 20rpx;
		box-shadow: 0rpx 0rpx 4rpx 2rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
		background-color: #FFFFFF;
	}
	
	.live-c-title {
		line-height: 30rpx;
		height: 20%;
	}
	
	.live-teacher-price {
		margin-top: 10rpx;
	}
	
	.price-wrap {
		margin-left: 55% !important;
	}
	
	.xiangziwrap {
		position: relative;
		left: calc(50% - 80px);
		width: 300rpx;
	}
		
	.xiangzi {
		margin-left: 100rpx;
		width: 100rpx;
		height: 100rpx;
	}
	
	.xiangzi_txt {
		width: 100%;
		display: block;
		text-align: center;
		font-size: 18rpx;
		color: #C7C7C7;
	}
</style>
